<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>中小河流/流域(可以选中区域)</title>
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/mapMain.js"></script>
    <script src="../build/ol.js"></script>
</head>
<body>
<div>
    <input type="button" onclick="showZXHL();" value="展示"/>
    <input type="button" onclick="hideZXHL();" value="隐藏"/>
</div>
<div id="map"></div>

</body>
<script type="text/javascript">

    var all_map;//定义地图全局变量
    var zxhlNumber = 87;

    var layers = new Array(zxhlNumber);
    var selects = new Array(zxhlNumber);

    var selectedFeatures;//选择功能（跟点击事件不一样，已选择再点击不触发）

    $(function(){
        var options = {id:'map'}
        all_map = showMap(options);
    })

    function hideZXHL(){
        if(layers.length==0&&selects.length==0){
            return ;
        }
        selectedFeatures = null;
        for(var i=0;i<zxhlNumber;i++){
            all_map.removeLayer(layers[i]);
            all_map.removeInteraction(selects[i]);
        }
    }

    function showZXHL(){
        hideZXHL()
        for(var i=0;i<zxhlNumber;i++){
            var str_url= "json/zxhl/"+i+".json";
            var vectorSource = new ol.source.Vector({
                url: str_url,
                format: new ol.format.GeoJSON()
            });
            var vectorLayer = new ol.layer.Vector({
                source : vectorSource,
                style : styleFun()
            });
            var select = new ol.interaction.Select();
            addLayers(vectorLayer, select, i);
        }
    }

    function styleFun() {
        var color="#2F4F4F";
        var colorfill="rgba(47,79,79, 0.3)";

        var style=new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: color,
                width: 1
            }),
            fill: new ol.style.Fill({
                color: colorfill
            })
        });
        return style;
    }

    function addLayers(layer, select, index) {

        layers[index] = layer;
        selects[index] = select;
        all_map.addLayer(layer);
        all_map.addInteraction(select);

        selectedFeatures = select.getFeatures();
        setSelectedFeatures();
    }

    function setSelectedFeatures(){
        selectedFeatures.on(['add'], function() {
            //中小河流，山洪沟编码
            var codes = selectedFeatures.getArray().map(function(feature) {
                return feature.get('FID');
            });

            //面积，只有中小河流有
            var area= selectedFeatures.getArray().map(function(feature) {
                return feature.get('Area');
            });
            console.log("area:"+area);
            console.log("codes:"+codes);
            if(codes%2==0){
                console.log("codes偶数,清空选择");
                selectedFeatures.clear();
            }else{
                console.log("codes奇数,不清空选择");
            }
        });
    }


</script>
</html>